<template>
  <div class="home">
    <!-- 头部 -->
    <keep-alive>
      <nav-bar class="nav-bar">
      <div slot="left">
        广州
        <img class="left_img" src="../assets/images/zk.png" alt />
      </div>
      <div slot="center">
        <img class="center_img" src="../assets/images/search.png" alt />
        <input class="center_input" type="text" placeholder="请输入关键词" />
      </div>
      <div slot="right">
        <img class="right_img" src="../assets/images/snipaste_20191106_200332.png" alt />
      </div>
    </nav-bar>
    </keep-alive>
    
    <scroll
      class="content"
      ref="scroll"
      @scroll="contentScroll"
      @pullingUp="loadMore"
      :pull-up-load="true"
      :probe-type="3"
    >
      <!-- 轮播图 -->
      <Banner :list="list"  style="padding-top:.48rem;"/>
      <!-- 菜单按钮 -->
      <Menu />
      <!-- 活动广告 -->
      <div class="adv">
        <img :src="activity.img" alt />
      </div>
      <!-- 附近好店 -->
      <GoodShop :industry="industry" :shopList="shopList" @chanageMsg="chanageMsg" />
      
    </scroll>
  </div>
</template>

<script>

import NavBar from "common/NavBar";
import Banner from "content/Banner";
import Menu from "content/Menu";
import GoodShop from "content/GoodShop";
import scroll from "common/Scroll";
export default {
  name: "home",
  data() {
    return {
      current: "homepage",
      list: [],
      activity: "",
      industry: [{ name: "推荐", id: 999 }],
      reqData: {
        tuijian: 1,
        industry_id: null,
        page: 1
      },
      shopList: []
    };
  },
  components: {
    NavBar,
    Banner,
    Menu,
    scroll,
    GoodShop
  },
  methods: {
    handleChange({ detail }) {
      this.setData({
        current: detail.key
      });
    },
    contentScroll(position) {
      console.log(position);
    },
    loadMore() {
      console.log("loadMore......");
    },
    getShopList() {
      this.$axios({
        url: "/api/list",
        method: "post",
        data: this.reqData
      })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.shopList = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    chanageMsg(v) {
      console.log(v);
      if (v == 999) {
        this.reqData.industry_id = null;
        this.getShopList();
      } else {
        this.reqData.industry_id = v;
        this.getShopList();
      }
    }
  },
  mounted() {
    // 获取轮播图数据
    this.$axios
      .post("/api/top")
      .then(res => {
        this.list = res.data.data.banner;
        this.activity = res.data.data.activity;
        for (let i = 0; i < res.data.data.industry.length; i++) {
          this.industry.push(res.data.data.industry[i]);
        }
      })
      .catch(err => {
        console.log(err);
      });
    this.getShopList();
  }
};
</script>
<style lang="less" scoped>
.home {
  width: 100vw;
  font-size: 0.16rem;
  .left_img {
    width: calc(21 / 2 * 0.01rem);
    height: calc(13 / 2 * 0.01rem);
    vertical-align: middle;
  }
  .center_img {
    position: absolute;
    z-index: 1;
    top: 0.12rem;
    left: 0.22rem;
    width: 0.2rem;
    height: 0.2rem;
  }
  .center_input {
    margin-left: 0.1rem;
    height: 0.35rem;
    border-radius: 0.5rem;
    width: 100%;
    background-color: #f1f1f3;
    color: #6d6f73;
    outline: none !important;
    box-shadow: none;
    text-indent: 2.5em;
    border: none;
  }
  .right_img {
    width: 0.25rem;
    height: 0.25rem;
    vertical-align: middle;
  }

  .adv {
    img {
      width: 100%;
    }
  }
}
.content{
  padding-bottom: .49rem;
}
.nav-bar{
  position: fixed;
  top: 0;
}
/deep/.ivu-input {
  border-radius: 0.5rem;
  background-color: #f1f1f3;
  color: #6d6f73;
  outline: none !important;
  box-shadow: none;
  text-indent: 2.5em;
  ::-webkit-input-placeholder {
    color: red !important;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: red !important;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: red !important;
  }
  :-ms-input-placeholder {
    color: red !important;
  }
}
::-webkit-input-placeholder {
  color: #6d6f73;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #6d6f73;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #6d6f73;
}
:-ms-input-placeholder {
  color: #6d6f73;
}
</style>
